<template>
  <div class="app-container">
    <el-dialog
      :visible.sync="dialog"
      :close-on-click-modal="false"
      width="1080px"
      top="10px"
      title="查看修改记录"
      @close="doClose"
    ><!--
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item name="1">
          <template slot="title">
            <i class="el-icon-search" />搜索栏
          </template>
          <div class="head-container">
            <el-form class="searchform" :model="param" :inline="true" size="mini" label-width="auto" @keyup.enter.native="toQuery">
              <el-form-item label="操作类型">
                <el-select v-model="param.logOperator" placeholder="请选择" style="width: 160px;" clearable>
                  <el-option v-for="item in getSelector().logOperators" :key="item.value" :label="item.name" :value="item.value" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
                <el-button size="mini" type="primary" style="float:right;margin-left:0px;" icon="el-icon-search" round @click="toQuery">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-item>
      </el-collapse>-->
      <div style="padding-top:5px">
        <el-table
          ref="ruleTable"
          :data="data"
          stripe
          size="small"
          :height="tableHeight"
          border
          style="width: 100%;"
          @sort-change="sortChange"
          @header-dragend="colChange"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-form class="compareForm" label-position="left" inline>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="">
                      <span>修改前:</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="">
                      <span>修改后:</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="规则业务类：">
                      <span>{{ businessType(parent.ruleApplyTypes, props.row.preRuleInfo.businessTypeIds) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="规则业务类：">
                      <span v-if="checkSameRuleApplyTypes(props.row.preRuleInfo.businessTypeIds,props.row.afterRuleInfo.businessTypeIds)">{{ businessType(parent.ruleApplyTypes, props.row.afterRuleInfo.businessTypeIds) }}</span>
                      <span v-else style="color:red;">{{ businessType(parent.ruleApplyTypes, props.row.afterRuleInfo.businessTypeIds) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="表单名称：">
                      <span>{{ showNameByValue(props.row.preRuleInfo.sheetVariableName, parent.sheetNames) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="表单名称：">
                      <span v-if="props.row.afterRuleInfo.sheetVariableName === props.row.preRuleInfo.sheetVariableName">{{ showNameByValue(props.row.afterRuleInfo.sheetVariableName, parent.sheetNames) }}</span>
                      <span v-else style="color:red;">{{ showNameByValue(props.row.afterRuleInfo.sheetVariableName, parent.sheetNames) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Excel列号：">
                      <span>{{ props.row.preRuleInfo.columnIndex }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="Excel列号：">
                      <span v-if="props.row.afterRuleInfo.columnIndex === props.row.preRuleInfo.columnIndex">{{ props.row.afterRuleInfo.columnIndex }}</span>
                      <span v-else style="color:red;">{{ props.row.afterRuleInfo.columnIndex }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="Excel列名：">
                      <span>{{ props.row.preRuleInfo.columnName }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="Excel列名：">
                      <span v-if="props.row.afterRuleInfo.columnName === props.row.preRuleInfo.columnName">{{ props.row.afterRuleInfo.columnName }}</span>
                      <span v-else style="color:red;">{{ props.row.afterRuleInfo.columnName }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="规则描述：">
                      <span>{{ props.row.preRuleInfo.ruleDesc }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="规则描述：">
                      <span v-if="props.row.afterRuleInfo.ruleDesc === props.row.preRuleInfo.ruleDesc">{{ props.row.afterRuleInfo.ruleDesc }}</span>
                      <span v-else style="color:red;">{{ props.row.afterRuleInfo.ruleDesc }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="备注：">
                      <span>{{ props.row.preRuleInfo.remark }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="备注：">
                      <span v-if="props.row.afterRuleInfo.remark === props.row.preRuleInfo.remark">{{ props.row.afterRuleInfo.remark }}</span>
                      <span v-else style="color:red;">{{ props.row.afterRuleInfo.remark }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="实现方式：">
                      <span>{{ showNameByValue(props.row.preRuleInfo.implType, getSelector().implTypes) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="实现方式：">
                      <span v-if="props.row.afterRuleInfo.implType === props.row.preRuleInfo.implType">{{ showNameByValue(props.row.afterRuleInfo.implType, getSelector().implTypes) }}</span>
                      <span v-else style="color:red;">{{ showNameByValue(props.row.afterRuleInfo.implType, getSelector().implTypes) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="规则状态：">
                      <span>{{ showNameByValue(props.row.preRuleInfo.ruleStatus, getSelector().ruleStatuses) }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="规则状态：">
                      <span v-if="props.row.afterRuleInfo.ruleStatus === props.row.preRuleInfo.ruleStatus">{{ showNameByValue(props.row.afterRuleInfo.ruleStatus, getSelector().ruleStatuses) }}</span>
                      <span v-else style="color:red;">{{ showNameByValue(props.row.afterRuleInfo.ruleStatus, getSelector().ruleStatuses) }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="更新人：">
                      <span>{{ props.row.preRuleInfo.updatedBy }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="更新人：">
                      <span v-if="props.row.afterRuleInfo.updatedBy === props.row.preRuleInfo.updatedBy">{{ props.row.afterRuleInfo.updatedBy }}</span>
                      <span v-else style="color:red;">{{ props.row.afterRuleInfo.updatedBy }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="更新时间：">
                      <span>{{ parseToString(props.row.preRuleInfo.updatedTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="更新时间：">
                      <span style="color:red;">{{ parseToString(props.row.afterRuleInfo.updatedTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-divider />
              </el-form>
            </template>
          </el-table-column>
          <el-table-column type="index" label="序号" :width="colWidths.index" align="center" />
          <el-table-column :show-overflow-tooltip="true" label="规则业务类" prop="applyType" :width="colWidths.applyType">
            <template slot-scope="scope">
              <span>{{ businessType(parent.ruleApplyTypes, scope.row.afterRuleInfo.businessTypeIds) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="表单名称" prop="sheetVariableName" :width="colWidths.sheetVariableName">
            <template slot-scope="scope">
              <span>{{ showNameByValue(scope.row.afterRuleInfo.sheetVariableName, parent.sheetNames) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="Excel列号" prop="afterRuleInfo.columnIndex" :width="colWidths.columnIndex" />
          <el-table-column :show-overflow-tooltip="true" label="Excel列名" prop="afterRuleInfo.columnName" :width="colWidths.columnName" />
          <el-table-column :show-overflow-tooltip="true" label="规则描述" prop="afterRuleInfo.ruleDesc" :width="colWidths.ruleDesc" />
          <el-table-column :show-overflow-tooltip="true" label="实现方式" prop="afterRuleInfo.implType" :width="colWidths.implType">
            <template slot-scope="scope">
              <span>{{ showNameByValue(scope.row.afterRuleInfo.implType, getSelector().implTypes) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="规则状态" prop="afterRuleInfo.ruleStatus" :width="colWidths.ruleStatus">
            <template slot-scope="scope">
              <span>{{ showNameByValue(scope.row.afterRuleInfo.ruleStatus, getSelector().ruleStatuses) }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="更新人" prop="createdBy" :width="colWidths.createdBy" />
          <el-table-column :show-overflow-tooltip="true" label="更新时间" prop="createdBy" :width="colWidths.createdTime">
            <template slot-scope="scope">
              <span>{{ parseToString(scope.row.createdTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="操作类型" prop="afterRuleInfo.logOperator" :width="colWidths.logOperator">
            <template slot-scope="scope">
              <span>{{ showNameByValue(scope.row.logOperator, getSelector().logOperators) }}</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination
          :total="total"
          :current-page.sync="currentPage"
          style="margin-top: 8px;"
          layout="total, prev, pager, next, sizes"
          @size-change="sizeChange"
          @current-change="pageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { parseToString } from '@/utils/datefromat'
import { businessType } from '@/utils/ruleUtil'
import { showNameByValue } from '@/utils/selectUtil'
import { getSelector } from './js/edit'
import request from '@/utils/iasServiceRequest'
import initTable from '@/utils/initTable'

export default {
  mixins: [initTable],
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      syncTime: [],
      dialog: false,
      curentObject: this,
      activeName: '1',
      tableHeight: window.innerHeight * 0.68,
      loading: true,
      data: [],
      page: 0,
      currentPage: 1,
      size: 10,
      total: 0,
      url: '',
      param: {},
      query: {},
      time: 170
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.doLayout()
        })
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.doLayout, true)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.doLayout, true)
  },
  created() {
    this.$nextTick(() => {
      // this.init()
    })
  },
  methods: {
    parseToString,
    businessType,
    showNameByValue,
    getSelector,
    doLayout() {
      if (this.$refs.ruleTable) {
        this.$refs.ruleTable.doLayout()
      }
    },
    checkSameRuleApplyTypes: function(ruleApplyTypes1, ruleApplyTypes2) {
      if (!ruleApplyTypes1 && !ruleApplyTypes2) {
        return true
      }
      if (ruleApplyTypes1 && !ruleApplyTypes2) {
        return false
      }
      if (!ruleApplyTypes1 && ruleApplyTypes2) {
        return false
      }
      if (ruleApplyTypes1.length !== ruleApplyTypes2.length) {
        return false
      }
      var temp1 = ruleApplyTypes1.join('')
      var temp2 = ruleApplyTypes2.join('')
      return temp1 === temp2
    },
    beforeInit() {
      this.url = '/rules/ruleMaintenanceLog/queryPage'
      this.param.pageNum = this.page
      this.param.pageSize = this.size
      return true
    },
    initData(url, params) {
      return request({
        url: url,
        method: 'post',
        params
      })
    },
    async init() {
      if (!await this.beforeInit()) {
        return
      }
      return new Promise((resolve, reject) => {
        this.loading = true
        this.getTableColWidth()
        this.initData(this.url, this.param).then(res => {
          this.total = res.result.total
          var records = []
          if (res.result.data) {
            res.result.data.forEach(item => {
              var record = {}
              record.preRuleInfo = JSON.parse(item.preRuleInfo)
              record.afterRuleInfo = JSON.parse(item.afterRuleInfo)
              record.logOperator = item.logOperator
              record.createdBy = item.createdBy
              record.createdTime = item.createdTime
              records.push(record)
            })
          }
          this.data = records
          setTimeout(() => {
            this.loading = false
          }, this.time)
          resolve(res)
        }).catch(err => {
          this.loading = false
          reject(err)
        })
      })
    },
    pageChange(e) {
      this.page = e - 1
      this.param.page = this.page
      this.init()
    },
    sizeChange(e) {
      this.page = 0
      this.size = e
      this.init()
    },
    // 列表排序触发
    sortChange(val) {
      const sortCol = val.prop.replace(/([A-Z])/g, '_$1').toUpperCase()
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.param.sort = sortCol + sortType
      this.init()
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    // 查询栏重置触发
    resetForm() {
      this.param = {}
    },
    // 关闭
    doClose: function() {
      this.dialog = false
    }
  }
}
</script>
<style scoped>
  .compareForm >>> .el-form-item {
    margin-bottom: 0px;
  }/*
  .compareForm >>> .el-row .el-col {
    border-bottom: 1px solid #8F999F;
  }*/
  .compareForm >>> .el-divider--horizontal {
    margin: 0px 0px
  }
</style>
